<template>
    <div class="router-params space-full">
        <div class="router-params-item">
            <h5 class="router-params-title">情形1：设置必传参数</h5>
            <div class="router-params-set">{ path: ' /router/params/:id ' }</div>
            <div class="router-params-explain">说明：此种状态路径id为必传项</div>
            <div class="router-params-explain">示例：this.$router.push('/router/params/1')</div>
        </div>
        <div class="router-params-item">
            <h5 class="router-params-title">情形2：设置可选择传输的参数</h5>
            <div class="router-params-set">{ path: ' /router/params/:id? ' }</div>
            <div class="router-params-explain">说明：此种状态路径id可传可不传</div>
            <div class="router-params-explain">示例1：this.$router.push('/router/params/1')</div>
        </div>
        <div class="router-params-item">
            <h5 class="router-params-title">情形3：通过query传参</h5>
            <div class="router-params-set">{ path: ' /router/params ' }</div>
            <div class="router-params-explain">示例：this.$router.push({path: '/router/params/', query: { name: 'w', id: 1 }})</div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'RouterParams'
}
</script>
<style lang="less" scoped>
.router-params{
    overflow-y: scroll;
    &-item{
        background: rgba(0,0,0);
        color:white;
        margin-bottom: 10px;
        padding: 20px;
        line-height: 30px;
    }
    &-item:last-child{
        margin-bottom: 0;
    }
    &-title{
        font-size: 20px;
        line-height: 40px;
    }
    &-set{
        font-size:18px;
        margin-left: 30px;
        margin-bottom: 6px;
    }
    &-explain{
        font-size: 16px;
        margin-left:30px;
        color: rgb(209, 208, 138);
    }
}
</style>
